<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>pv_area</title>
  <link rel="stylesheet" href="/css/base.css">
  <link rel="stylesheet" href="/css/element.css">
</head>
<div id="wrapper">

  <!--        表格-->
  <el-row style="margin-top: 10px">
    <el-col>
      <div style="height: 1px; background-color: white"></div>
<!--      <el-button @click="add" type="primary" size="mini" v-show="user.authority== 1" style="margin: 10px 0">新增</el-button>-->
      <!--            <el-button @click="exp" type="primary" size="mini" style="margin: 10px 0">导出</el-button>-->
      <el-table :data="tableData" border>
        <el-table-column prop="pjId" minwidth="150"label="项目编号"></el-table-column>
        <el-table-column prop="pjName" minwidth="150"label="项目名称"></el-table-column>
        <el-table-column prop="ownerName" minwidth="150"label="项目业主"></el-table-column>
        <el-table-column prop="locName" minwidth="150"label="项目地址"></el-table-column>
        <el-table-column prop="design" minwidth="150" label="设计单位"></el-table-column>
        <el-table-column prop="type" minwidth="150" label="类型"></el-table-column>
        <el-table-column prop="stage" minwidth="150" label="状态"></el-table-column>
        <el-table-column prop="date" minwidth="150" label="建设时间"></el-table-column>
        <el-table-column prop="invest" minwidth="150" label="投资"></el-table-column>
<!--        <el-table-column fixed="right" v-show="user.authority== 1"minwidth="150"label="操作">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button @click="edit(scope.row)" type="text" v-show="user.authority== 1">编辑</el-button>-->
<!--            <el-button @click="del(scope.row.id)" v-show="user.authority== 1" type="text">删除</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
      <div style="background-color: white">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
      </div>

<!--      <el-dialog title="项目信息表" :visible.sync="dialogFormVisible" width="30%"-->
<!--                 close-on-click-modal="false" close-on-press-escape="false" show-close="false">-->
<!--        <el-form :model="entity">-->
<!--          <el-form-item label="项目编号" label-width="100px">-->
<!--            <el-input v-model="entity.pjId" autocomplete="off" style="width: 80%"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="项目名称" label-width="100px">-->
<!--            <el-input v-model="entity.pjName" autocomplete="off" style="width: 80%"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="项目业主" label-width="100px">-->
<!--            <el-input v-model="entity.ownerName" autocomplete="off" style="width: 80%"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="项目地点" label-width="100px">-->
<!--            <el-input v-model="entity.locName" autocomplete="off" style="width: 80%"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="设计单位" label-width="100px">-->
<!--            <el-input v-model="entity.design" autocomplete="off" style="width: 80%"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="类型" label-width="100px">-->
<!--            <el-input v-model="entity.type" autocomplete="off" style="width: 80%"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="状态" label-width="100px">-->
<!--            <el-input v-model="entity.stage" autocomplete="off" style="width: 80%"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="建设时间" label-width="100px">-->
<!--            <el-input v-model="entity.date" autocomplete="off" style="width: 80%"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="投资" label-width="100px">-->
<!--            <el-input v-model="entity.invest" autocomplete="off" style="width: 80%"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-form>-->
<!--        <div slot="footer" class="dialog-footer">-->
<!--          <el-button @click="dialogFormVisible = false">取 消</el-button>-->
<!--          <el-button type="primary" @click="save">确 定</el-button>-->
<!--        </div>-->
<!--      </el-dialog>-->
    </el-col>
  </el-row>

</div>

<script src="/js/jquery.min.js"></script>
<script src="/js/vue.min.js"></script>
<script src="/js/element.js"></script>

<script>
  let urlBase = "/pj_details/";
  new Vue({
    el: "#wrapper",
    data: {
      user: {},
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      dialogFormVisible: false,
      entity: {}
    },
    created() {
      this.user = JSON.parse(localStorage.getItem("user"));
      this.loadTable();
    },
    methods: {
      logout() {
        localStorage.removeItem("user");
        location.href = "/login.html";
      },
      loadTable() {
        $.get(urlBase + "/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize).then(res => {
          console.log("-------------------------",res.data.content);
          this.tableData = res.data.content;
          this.total = res.data.totalElements;
        })
      },
      exp() {
        window.open(urlBase + "/export");
      },
      handleSizeChange(pageSize) {
        this.pageSize = pageSize;
        this.loadTable();
      },
      handleCurrentChange (pageNum) {
        this.pageNum = pageNum;
        this.loadTable();
      },
      add() {
        this.entity = {};
        this.dialogFormVisible = true;
      },
      save() {
        let type = this.entity.id ? "PUT": "POST";
        $.ajax({
          url: urlBase,
          type: type,
          contentType: "application/json",
          data: JSON.stringify(this.entity)
        }).then(res => {
          if (res.code === '0') {
            this.$message({
              message: "保存成功",
              type: "success"
            });
            this.loadTable();
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            })
          }
          this.dialogFormVisible = false;
        })
      },
      edit(obj) {
        this.entity = obj;
        this.dialogFormVisible = true;
      },
      del(id) {
        $.ajax({
          url: urlBase + id,
          type: "delete"
        }).then(res => {
          if (res.code === '0') {
            this.$message({
              message: "删除成功",
              type: "success"
            })
            this.loadTable();
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            })
          }
        })
      }
    }
  })
</script>
</body>
</html>
